<template>
  <div class="moldstock-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button :icon="Search" plain type="primary" @click="openQueryDialog">
          查询
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      :cell-style="{ padding: '6px' }"
      :data="state.list"
      highlight-current-row
      :row-style="{ fontSize: '8px' }"
    >
      <el-table-column type="index" width="50" />

      <el-table-column label="模具编码" min-width="120" prop="moldCode">
        <!-- <template #default="scope">
          <div>
            <div>{{ scope.row.moldCode }}</div>
          </div>
        </template> -->
      </el-table-column>
      <el-table-column label="模具名称" min-width="120">
        <template #default="scope">
          <div style="font-weight: 600; color: #333">
            {{ scope.row.moldName }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="仓库" min-width="120" prop="whName" />

      <el-table-column label="数量" min-width="120">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <span style="font-size: 18px; font-weight: 600; color: brown">
              {{ scope.row.qty }}
            </span>
            &nbsp;
            {{ scope.row.measName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="规格" min-width="120" prop="moldSpec" />
    </el-table>
    <el-pagination
      background
      :current-page="state.paginationParams.pageNum"
      :layout="layout"
      :page-size="state.paginationParams.pageSize"
      :total="state.paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
  </div>
</template>

<script setup>
  import { Search } from '@element-plus/icons-vue'
  import { getMoldStockPageApi } from '@/api/equip/mold_api'
  import { localStorageConfig } from '@/config/localstorage.config'
  const $baseLoading = inject('$baseLoading'),
    $baseMessage = inject('$baseMessage'),
    pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const state = reactive({
    list: [],
    currentRow: null,
    queryParams: {
      pkCorp,
    },
    paginationParams: {
      pageNum: 1,
      pageSize: 20,
      total: 0,
    },
  })

  const openQueryDialog = () => {}

  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    state.paginationParams.pageNum = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    state.paginationParams.pageSize = args[0] ? args[0] : 20
    state.paginationParams.pageNum = 1
  }
  onMounted(() => {
    refreshData()
  })
  const refreshData = () => {
    state.paginationParams.pageNum = 1
    getData()
  }
  watch(
    () => state.paginationParams,
    () => {
      getData()
    }
  )
  const getData = async () => {
    const load = $baseLoading()
    try {
      let params = {
        pageNum: state.paginationParams.pageNum,
        pageSize: state.paginationParams.pageSize,
        ...state.queryParams,
      }
      const res = await getMoldStockPageApi(params)
      if (res.code === 2000) {
        $baseMessage(res.msg, 'success')
        state.list = res.data.list
        state.paginationParams.total = res.data.total
      } else {
        $baseMessage(res.msg, 'error')
      }
    } finally {
      load.close()
    }
  }
</script>
